<template>
  <div class='container'>
    <div class="app-container">
      <el-row type="flex" style="flex-wrap:wrap;">
        <el-col :span="6" class="box">【题型】：{{getType(form.questionType)}}</el-col>
        <el-col :span="6" class="box">【编号】：{{form.number}}</el-col>
        <el-col :span="6" class="box">【难度】：{{getDifficulty(form.difficulty)}}</el-col>
        <el-col :span="6">【标签】：{{form.tags}}</el-col>
        <el-col :span="6">【学科】：{{form.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{form.directoryName}}</el-col>
        <el-col :span="5">【方向】：{{form.direction}}</el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 题干部分 -->
      <span>【题干】：</span>
      <p
        v-html="form.question"
        style="color:blue"
      ></p>
      <!-- 单选内容 -->
      <div class="singleSelection">{{getType(form.questionType)}}：（以下选中的选项为正确答案）</div>
      <!-- 单选题的内容 -->
      <el-row v-if="getType(form.questionType) === '单选'">
        <el-radio-group v-model="singleChoice">
          <el-radio v-for="item in form.options" :key="item.id" :label="item.isRight" :value="item.title" :disabled="item.isRight !== 1" class="singleChoice">
          {{item.code}} :  {{item.title}}
          </el-radio>
        </el-radio-group>
      </el-row>
      <!-- 简答题的内容 -->
      <el-row v-else-if="getType(form.questionType) === '简答'">
          <el-input  :disabled="true" type="textarea"     v-html="form.answer"></el-input>
      </el-row>
       <!-- 多选题的内容 -->
      <el-row v-else>
         <el-checkbox-group v-model="multipleChoice" >
          <el-checkbox v-for="item in form.options" :key="item.id" :label="item.isRight" :value="item.title"
          :disabled="item.isRight !== 1" class="multipleChoice">
            {{item.code}} :  {{item.title}}
           </el-checkbox>
      </el-checkbox-group>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <div>
        <span>【参考答案】：</span>
        <a :href="form.videoURL">
          <el-button type="danger">视频答案预览</el-button>
        </a>
      </div>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row>【答案解析】：
        <span
          v-html="form.answer"
          style="display:inline-block"
        ></span>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <span>【题目备注】：{{form.remarks}}</span>
      <!-- 关闭按钮 -->
      <el-row
        style="margin-top:30px"
        type="flex"
        justify="end"
      >
        <el-button
          type="primary"
          @click="doClose"
        >关闭</el-button>
      </el-row>
    </div>

  </div>
</template>

<script>
import { detail } from '../../../api/hmmm/questions'
import {
  questionType,
  difficulty
} from '../../../api/hmmm/constants'
export default {
  // 父组件传递过来的值
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      singleChoice: 1, // 单选v-model的值
      multipleChoice: [1], // 多选回填的值
      form: {
        questionType: '', // 题型
        number: '', // 试题编号
        difficulty: '', // 难度
        tags: '', // 标签
        subjectName: '', // 学科
        directoryName: '', // 目录
        direction: '', // 方向
        // question: '',
        options: [], // 单选数组
        isNum: 1, // 单选v-model的值
        videoURL: '', // 视频地址
        answer: '', // 答案解析
        remarks: '' // 题目备注
      }

    }
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      const res = await detail(this.row) // 获取试题详情列表api
      console.log(res)
      this.form = res.data // 给form赋值,回填数据
      this.form.options.sort((a, b) => {
        console.log('a的值是', a)
        console.log('b的值是', b)
        if (a.id < b.id) return -1
        if (a.id > b.id) return 1
        return 0
      })
    },
    // 点击关闭按钮的时候,通知父组件关闭弹窗
    doClose () {
      this.$emit('closeFn')
    },
    // 转换题的类型
    getType (id) {
      const newType = {}
      questionType.forEach((item) => {
        newType[item.value] = item.label
      })
      return newType[id]
    },
    // 转换难度
    getDifficulty (id) {
      const newDifficulty = {}
      difficulty.forEach((item) => {
        newDifficulty[item.value] = item.label
      })
      return newDifficulty[id]
    }
  }
}
</script>

<style scoped lang='scss'>
.box {
  margin-bottom: 20px;
}
.singleSelection {
  margin-bottom: 20px;
}
.multipleChoice{
  display: block;
  margin-bottom: 20px;
}
.el-radio-group {
  display: flex;
  flex-direction: column;
}
.el-radio {
  margin-bottom: 20px;
}
</style>
